<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./line.css">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <div class="addLine" @click="clickShowAddLine">
      添加线路
    </div>
    <div style="position: fixed;right:0;top:0;width: 40%;">
      <!-- {{ruleForm}} -->
      <!-- {{dialogImageUrl}} -->
      {{ruleForm.DayContentList}}
    </div>

    <div style="position: fixed;right:40%;top:40%;display:flex;flex-direction: column;width: 120px;">
      <draggable v-model="ruleForm.DayContentList" :options="{group:'people'}">
        <el-button v-for="(item, index) in ruleForm.DayContentList">第{{index+1}}天的内容</el-button>
      </draggable>
    </div>
    <div class="addLineBox" v-show="showAddLineBox">
      <el-form :model="ruleForm" ref="ruleForm" label-width="125px" class="demo-ruleForm" status-icon
        @submit.native.prevent>
        <el-form-item label="线路标题" prop="title" :rules="rules.title">
          <el-input clearable v-model="ruleForm.title" maxlength="25" placeholder="请添加线路标题" show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="添加线路简介" prop="summary" :rules="rules.summary">
          <el-input clearable v-model="ruleForm.summary" maxlength="30" placeholder="请添加线路简介" show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="添加耗时时长(天)" prop="consumption_time" :rules="rules.consumption_time">
          <el-input-number v-model="ruleForm.consumption_time" :min="1" :max="100" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="添加线路特点(拖拽)" prop="addLineFeature" :rules="rules.addLineFeature">
          <draggable v-model="ruleForm.addLineFeature" :options="{group:'people'}">
            <div v-for="(lineFeatureItem, lineFeatureItemIndex) in ruleForm.addLineFeature"
              style="display: flex;align-items: center;justify-content: center;">
              <el-form :model="lineFeatureItem" ref="addLineFeature" label-width="100px" class="demo-ruleForm"
                status-icon @submit.native.prevent>
                <el-form-item :label="(lineFeatureItemIndex+1)+'.'" prop="val" :rules="rules.addLineFeature">
                  <div style="display: flex;align-items: center;justify-content: center;">
                    <el-input clearable v-model="lineFeatureItem.val" maxlength="30" show-word-limit
                      placeholder="请添加线路特点">
                    </el-input>
                    <div>
                      <div class="el-icon-circle-plus" @click="featureDotsAdd(lineFeatureItemIndex)"
                        v-show="featureDotsItemAddNum == lineFeatureItemIndex"
                        style="font-size: 20px;color:#F9CC9D;cursor: pointer;"></div>
                      <el-popover placement="top" width="160" v-model="lineFeatureItem.IsDel"
                        v-if="featureDotsItemAddNum == lineFeatureItemIndex || featureDotsItemAddNum != lineFeatureItemIndex">
                        <p>确定删除内容吗？</p>
                        <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="featureDotsDelCancel(lineFeatureItemIndex)">取消
                          </el-button>
                          <el-button type="primary" size="mini" @click="featureDotsDel(lineFeatureItemIndex)">
                            确定</el-button>
                        </div>
                        <div slot="reference" class="el-icon-remove"
                          style="font-size: 20px;color: #94FFFF;cursor: pointer;"></div>
                      </el-popover>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </draggable>
        </el-form-item>
        <el-form-item label="添加线路标签" prop="tag" :rules="rules.tag">
          <el-input clearable v-model="ruleForm.tag" maxlength="100" placeholder="用逗号分隔每个标签如(tag1,tag2,tag3)"
            show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="添加排序值(0-1000)" prop="sort" :rules="rules.sort">
          <el-input-number v-model="ruleForm.sort" :min="0" :max="1000" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="添加景点" prop="scenic" :rules="rules.scenic">
          <el-select v-model="ruleForm.scenic" multiple placeholder="请选择">
            <el-option v-for="item in optionScenic" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加线路图片" prop="thumb" :rules="rules.thumb">
          <el-upload limit="5" action="#" list-type="picture-card" :auto-upload="false" :on-change="addLineImg"
            :on-exceed="addLineOutLimit" :file-list="ruleForm.thumb">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="lineMagnifyImg(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="lineRemoveImg(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>

        --------------------------- day list ------------------------------------
        <!-- form -->
        <div class="forDayListBox" v-for="(dayItem, dayItemIndex) in ruleForm.DayContentList"
          :style="dayItemIndex%2==0?'border: 1Px solid salmon;padding: 20px;position: relative':'border: 1Px solid #007ACC;padding: 20px;position: relative'">
          <el-button>第{{dayItemIndex+1}}天</el-button>
          <el-form label="描述" :model="dayItem" ref="scenicDescribe" label-width="150px" class="demo-ruleForm"
            status-icon @submit.native.prevent>
            <el-form-item label="简介" prop="scenicDescribe" :rules="rules.scenicDescribe">
              <el-input type="textarea" v-model="dayItem.scenicDescribe" show-word-limit maxlength="200"
                :autosize="{ minRows: 2, maxRows: 6}" clearable></el-input>
              {{dayItem.scenicDescribe}}
            </el-form-item>
          </el-form>
          <!-- 这是步骤盒子的布局 -->
          <div style="display: flex;align-items: center;">
            <!-- 左边是列表组可拖拽调整步骤位置 -->
            <div style="flex: 2">
              <draggable v-model="dayItem.scenicPieceStep" :options="{group:'people'}">
                <el-button v-for="(stepItem, stepIndex) in dayItem.scenicPieceStep">第{{stepIndex+1}}个步骤
                </el-button>
              </draggable>
            </div>
            <!-- 步骤内容列表 -->
            <div style="flex: 8;">
              <div v-for="(stepItem, stepIndex) in dayItem.scenicPieceStep"
                style="display: flex;align-items: center;justify-content: center;border:1PX solid saddlebrown;position: relative;">
                <el-form :model="stepItem" :ref="'step'+dayItemIndex" label-width="150px" class="demo-ruleForm"
                  status-icon @submit.native.prevent>
                  <!-- 描述线路步骤 -->
                  <el-form-item label="游玩点标题" prop="val" :rules="rules.addLineFeature">
                    <div class="lineAddStepBox" style="display: flex;align-items: center;justify-content: center;">
                      <span>{{stepIndex+1}}.</span>
                      <el-input clearable v-model="stepItem.val" show-word-limit maxlength="30">
                      </el-input>
                    </div>
                  </el-form-item>
                  <el-form-item label="游玩时长(小时单位)" prop="playDayNum" :rules="rules.playDayNum">
                    <el-input-number v-model="stepItem.playDayNum" :precision="1" :step="0.1" :min="0">
                    </el-input-number>
                    <span style="font-size: 12px;">{{stepItem.playDayNum}}小时</span>
                  </el-form-item>
                  <!-- 富文本 -->
                  <div style="border: 1px solid skyblue;margin: 5px">
                    <div style="min-height: 300px;">
                      <draggable v-model="stepItem.content" :options="{group:'people'}">
                        <div v-for="(stepCon, stepConIndex) in stepItem.content">
                          <div v-if="stepCon.type == 'text'"
                            style="border:1px dotted #cccccc;border-radius: 4px;margin: 5px;position: relative;">
                            <div style="line-height: 2">
                              {{stepCon.val}}
                            </div>
                            <el-popover placement="top" width="160" v-model="stepCon.IsDel">
                              <p>确定删除内容吗？</p>
                              <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text"
                                  @click="stepConCancel(dayItemIndex, stepIndex, stepConIndex)">
                                  取消
                                </el-button>
                                <el-button type="primary" size="mini"
                                  @click="stepConDel(dayItemIndex, stepIndex, stepConIndex)">
                                  确定</el-button>
                              </div>
                              <span class="el-icon-error" slot="reference"
                                style="position: absolute;top:0;right:0;color: salmon;font-size: 20px"></span>
                            </el-popover>
                          </div>
                          <div v-else style="position: relative">
                            <el-image :src="stepCon.imgList.url"></el-image>
                            <el-popover placement="top" width="160" v-model="stepCon.IsDel">
                              <p>确定删除内容吗？</p>
                              <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text"
                                  @click="stepConCancel(dayItemIndex, stepIndex, stepConIndex)">
                                  取消
                                </el-button>
                                <el-button type="primary" size="mini"
                                  @click="stepConDel(dayItemIndex, stepIndex, stepConIndex)">
                                  确定</el-button>
                              </div>
                              <span class="el-icon-error" slot="reference"
                                style="position: absolute;top:0;right:0;color: salmon;font-size: 20px"></span>
                            </el-popover>
                          </div>
                        </div>
                      </draggable>
                    </div>
                    <div class="btnGroup" style="display: flex;justify-content: flex-end;">
                      <el-button size='mini' type="primary" @click='stepAddText(dayItemIndex, stepIndex)'>添加文本
                      </el-button>
                      <el-button size='mini' type="primary" @click='stepAddImg(dayItemIndex, stepIndex)'>添加图片
                      </el-button>
                    </div>
                  </div>
                  <!-- 关联资源 -->
                  <el-form-item label="请添关联资源" prop="resource" :rules="rules.resource">
                    <el-select v-model="stepItem.resource" multiple placeholder="请选择">
                      <el-option v-for="item in optionResource" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <el-popover placement="top" width="160" v-model="stepItem.IsDel"
                  v-if="dayItem.scenicPieceStepNum == stepIndex || dayItem.scenicPieceStepNum != stepIndex ">
                  <p>确定删除内容吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="lineStepCancel(dayItemIndex, stepIndex)">
                      取消
                    </el-button>
                    <!--  -->
                    <el-button type="primary" size="mini" @click="stepDel(dayItemIndex, stepIndex)">
                      确定</el-button>
                  </div>
                  <span class="el-icon-error" slot="reference"
                    style="position: absolute;top:0;right:0;color: salmon;font-size: 20px"></span>
                </el-popover>
              </div>
              <el-button type="primary" size="mini" @click="lineStepAdd(dayItemIndex, stepIndex, 'step')">添加步骤
              </el-button>
              <!-- 步骤的删除 -->
            </div>
          </div>
          <!-- <el-button type="primary" @click="addDayData('scenicDescribe', dayItemIndex)">添加1天
          </el-button> -->
          <el-popover placement="top" width="160" v-model="dayItem.IsDel">
            <p>确定删除内容吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="dayCancel(dayItemIndex)">
                取消
              </el-button>
              <el-button type="primary" size="mini" @click="dayDel(dayItemIndex)">
                确定</el-button>
            </div>
            <span class="el-icon-error" slot="reference"
              style="position: absolute;top:0;right:0;color: salmon;font-size: 20px"></span>
          </el-popover>
        </div>
        <!-- 描述线路步骤 -->
        <el-form-item>
          <el-button type="primary" @click="addDayData('scenicDescribe', dayItemIndex)">添加1天
          </el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 全局大图img -->
    <el-dialog :visible.sync="globalMagnify">
      <!-- <img width="100%" :src="'http://' + globalMagnifyUrl"> -->
      <img width="100%" :src="globalMagnifyUrl">
    </el-dialog>
    <!-- 富文本的text添加 -->
    <el-dialog title="添加文本" :visible.sync="addText" @close="handleDialogClose">
      <el-input type="textarea" v-model="globalText" show-word-limit maxlength="500"
        :autosize="{ minRows: 1, maxRows: 10}" clearable></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="gloablTextCancel">取 消</el-button>
        <el-button type="primary" @click="gloablTextConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 富文本的img添加 -->
    <el-dialog title="添加图片" :visible.sync="addImg" @close="handleDialogClose">
      <el-upload limit="5" action="#" list-type="picture-card" :auto-upload="false"
        :on-change="(file, fileList) => addglobalImg(file, fileList)"
        :on-exceed="(file, fileList) => addglobalImgLimit(file, fileList)" :file-list="globalImg">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url">
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="lineMagnifyImg(file)">
              <i class="el-icon-zoom-in"></i>
            </span>
            <!--  -->
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="globalRemoveImg(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="gloablImgCancel">取 消</el-button>
        <el-button type="primary" @click="gloablImgConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <!-- 全局放大镜 -->


  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 生产环境版本，优化了尺寸和速度 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 拖拽包 -->
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>
  <script src='./cos-js-sdk-v5.min.js'></script>
  <!-- element UI -->
  <script>
    var Bucket = 'sun-1253313441';
    var Region = 'ap-chengdu';


    // 初始化实例
    // var cos = new COS({
    //     SecretId: 'AKID30oTxOckfT7f5NNdfWCh196MXXLydhMv',
    //     SecretKey: 'XuAmLjwyo2DF5l3Gct00rXDPXo01FO6h',
    // });
    function allCheckRules(that, formName, index) {
      let result
      result = new Promise((resolve, reject) => {
        if (index) {
          that.$refs[formName][(index - 1)].validate((valid) => {
            if (valid) {
              resolve();
            } else { reject() }
          })
        } else {
          that.$refs[formName].validate((valid) => {
            if (valid) {
              resolve();
            } else { reject() }
          })
        }
      })
      return result
    }
    var cos = new COS({
      getAuthorization: function (options, callback) {
        var url = 'http://wl.fangkeng.wang/api/test/test';
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onload = function (e) {
          try {
            var data = JSON.parse(e.target.responseText);
          } catch (e) {
          }
          callback({
            TmpSecretId: data.credentials && data.credentials.tmpSecretId,
            TmpSecretKey: data.credentials && data.credentials.tmpSecretKey,
            XCosSecurityToken: data.credentials && data.credentials.sessionToken,
            ExpiredTime: data.expiredTime,
          });
        };
        xhr.send();
      }
    });
    var checkPlayDayNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("必须输入非零数字"))
      } else {
        callback()
      }
    };
    var checkScenicImg = (rule, value, callback) => {
      if (value.length == 0) {
        return callback(new Error("必须添加至少一张图片"))
      } else {
        callback()
      }
    }
    var app = new Vue({
      el: '#app',
      data: {
        dayItemIndex: null, // day的index
        stepIndex: null, // 步骤的index
        addText: false, // 添加文本
        addImg: false, // 添加img
        globalText: '', // globalText
        globalImg: [], // globalImg
        optionResource: [{ id: 0, name: '香菜' }, { id: 1, name: '肉夹馍' }, { id: 2, name: '酸菜' }], // 关联资源 步骤里面的
        optionScenic: [{ id: 0, name: '香菜' }, { id: 1, name: '肉夹馍' }, { id: 2, name: '酸菜' }], // 关联景点的数组 外层的
        globalMagnify: false, // 是否显示全局放大镜
        globalMagnifyUrl: '', // 全局放大镜的本地url
        showAddLineBox: false,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        featureDotsItemAddNum: 0, //线路特色添加index
        // scenicPieceStepNum: 0, // dayList 添加步骤的index
        dayNum: 0, // day的index
        // 表单
        ruleForm: {
          title: '', // 标题
          thumb: [], // imgList
          summary: '', // 简介
          consumption_time: 0, // 耗时时长（天）
          tag: '', // 标签tag
          sort: null, // 排序值
          scenic: [], // 选择关联景点
          addLineFeature: [{ val: '', IsDel: false }],
          // dayList scenicImg: [], text: ''
          DayContentList: [
            {
              scenicPieceStep: [{ val: '', IsDel: false, playDayNum: 0, content: [], resource: [] }],
              scenicDescribe: '',
              scenicPieceStepNum: 0,
              IsDel: false
            }
          ]
        },
        rules: {
          // 线路标题
          title: [
            { required: true, message: '请添加线路标题', trigger: ['change', 'blur'] }
          ],
          thumb: [
            { type: 'array', required: true, message: '请选择1-5张图片', trigger: ['change', 'blur'] }
          ],
          // 线路简介
          summary: [
            { required: true, message: '请添加线路简介', trigger: ['change', 'blur'] }
          ],
          // 耗时时长（天）
          consumption_time: [
            { type: 'number', required: true, message: '请添加耗时时长(天)', trigger: ['change', 'blur'] }
          ],
          // 添加标签
          tag: [
            { required: true, message: '请添加标签', trigger: ['change', 'blur'] }
          ],
          // 排序值
          sort: [
            { type: 'number', required: true, message: '请排序值(0-1000)', trigger: ['change', 'blur'] }
          ],
          // 选择关联景点
          scenic: [
            { required: true, message: '请选择关联景点', trigger: ['change', 'blur'] }
          ],
          addLineFeature: [ // addLineFeature
            { required: true, message: '请添加线路特色', trigger: ['change', 'blur'] }
          ],
          // 描述线路步骤
          scenicPieceStep: [
            { required: true, message: '请输入线路步骤', trigger: ['change', 'blur'] }
          ],
          // 步骤的关联资源
          resource: [
            { required: true, message: '请选择关联资源', trigger: ['change', 'blur'] }
          ],
          // day的简单总描述
          scenicDescribe: [
            { required: true, message: '请输入当天的总描述', trigger: ['change', 'blur'] }
          ],
          // 游玩时长
          playDayNum: [
            { required: true, message: '请输入游玩时长', trigger: ['change', 'blur'] },
            { validator: checkPlayDayNum, trigger: ['change', 'blur'] }
          ],
          // text 添加线路景点活动描述
          scenicText: [
            { required: true, message: '请添加线路景点活动描述', trigger: ['change', 'blur'] }
          ],
          // scenicImg  添加线路景点图片
          scenicImg: [
            // { type: 'array', required: true, message: '请添加线路景点图片(1-5张)', trigger: ['change', 'blur'] },
            { validator: checkScenicImg, required: true, trigger: ['change', 'blur'] }
          ]
        }
      },
      methods: {
        handleDialogClose() {
          this.globalText = ''
          this.globalImg = []
        },
        // 步骤删除
        stepDel(dayItemIndex, stepIndex) {
          let list = this.ruleForm.DayContentList[dayItemIndex].scenicPieceStep
          list.splice(stepIndex, 1)
        },
        // 添加的img按钮
        stepAddImg(dayItemIndex, stepIndex) {
          this.dayItemIndex = dayItemIndex
          this.stepIndex = stepIndex
          this.addImg = true
        },
        // 步骤中的内容删除
        stepConDel(dayItemIndex, stepIndex, stepConIndex) {
          let list = this.ruleForm.DayContentList[dayItemIndex].scenicPieceStep[stepIndex]
          list.content.splice(stepConIndex, 1)
        },
        // 步骤中的内容取消
        stepConCancel(dayItemIndex, stepIndex, stepConIndex) {
          let list = this.ruleForm.DayContentList[dayItemIndex].scenicPieceStep[stepIndex]
          list.content[stepConIndex].IsDel = false
        },
        // 添加的text按钮
        stepAddText(dayItemIndex, stepIndex) {
          this.dayItemIndex = dayItemIndex
          this.stepIndex = stepIndex
          this.addText = true

        },
        //  弹框的img取消
        gloablImgCancel() {
          this.addImg = false
          this.globalImg = []
        },
        // 弹框的img确认
        gloablImgConfirm() {
          this.globalImg.map((item, index) => {
            let obj = { imgList: {}, type: 'img', IsDel: false }
            obj.imgList.name = item.name
            obj.imgList.url = item.url
            obj.imgList.file = item.raw
            let list = this.ruleForm.DayContentList[this.dayItemIndex].scenicPieceStep[this.stepIndex]
            list.content.push(obj)
          })
          this.addImg = false
          this.globalImg = []
        },
        // 弹框的text确认
        gloablTextConfirm() {
          let obj = { val: '', type: 'text', IsDel: false }
          this.addText = false
          if (this.globalText !== '') {
            obj.val = this.globalText
            let list = this.ruleForm.DayContentList[this.dayItemIndex].scenicPieceStep[this.stepIndex]
            list.content.push(obj)
          }
          this.globalText = ''
        },
        // 弹框的text取消
        gloablTextCancel() {
          this.addText = false
          this.globalText = ''
        },
        // 全局添加img
        addglobalImg(file, fileList) {
          this.globalImg = fileList
        },
        // 全局添加图片限制
        addglobalImgLimit(file, fileList) {
          this.$message({ message: '只能选5张图片', type: 'warning' })
        },
        // 全局图片的移除
        globalRemoveImg(file) {
          this.globalImg.map((item, index) => {
            if (file.name == item.name) {
              this.globalImg.splice(index, 1)
            }
          })
        },
        // day 取消
        dayCancel(index) {
          this.ruleForm.DayContentList[index].IsDel = false;
        },
        // day 删除
        dayDel(index) {
          if (this.ruleForm.DayContentList.length > 1) {
            this.ruleForm.DayContentList.splice(index, 1)
            this.dayNum--
          }
        },
        // 添加每天的数据
        addDayData(formName, dayItemIndex) {
          console.log(this.$refs)
          const obj = {
            scenicPieceStep: [{ val: '', IsDel: false, playDayNum: 0, content: [], resource: [] }],
            IsDel: false,
            scenicDescribe: '',
            scenicPieceStepNum: 0
          }
          let arr = []
          let that = this
          let dayList = this.ruleForm.DayContentList
          dayList.map((item, index) => {
            arr.push(allCheckRules(that, 'scenicDescribe', (index + 1)))
            item.scenicPieceStep.map((stepitem, stepindex) => {
              arr.push(allCheckRules(that, 'step'+stepindex, (stepindex + 1)))
            })
          })
          // let stepList = this.ruleForm.DayContentList[dayItemIndex].scenicPieceStep
          // arr.push(allCheckRules(that, formName, (dayItemIndex + 1)))
          // stepList.map((item, index) => {
          //   arr.push(allCheckRules(that, ('step' + dayItemIndex), (index + 1)))
          // })
          Promise.all(arr).then(function () { //都通过了
            that.dayNum++
            that.ruleForm.DayContentList.push(obj)
          }).catch((err) => {
            this.$message({ message: '请填写完整信息', type: 'warning' })
            console.log("err");
          })
        },
        handleRemove(file) {
          console.log(file);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        clickShowAddLine() {
          this.showAddLineBox = true
        },
        submitForm(formName) {
          // console.log(this.$refs)
          let arr = []
          let that = this
          arr.push(allCheckRules(that, 'ruleForm'))
          this.ruleForm.addLineFeature.map((item, index) => {
            arr.push(allCheckRules(that, 'addLineFeature', (index + 1)))
          })
          this.ruleForm.DayContentList.map((item, index) => {
            arr.push(allCheckRules(that, 'scenicDescribe', (index + 1)))
            item.scenicPieceStep.map((iitem, iindex) => {
              arr.push(allCheckRules(that, 'step' + index, (iindex + 1)))
            })
          })
          let data = this.ruleForm.DayContentList
          Promise.all(arr).then(function () { //都通过了
            alert('yes')
            data.map((item, index) => {
              item.title = `第${index + 1}天`
            })
            console.log(that.ruleForm)
          }).catch((err) => {

            console.log("err", this.ruleForm.thumb);
            this.$message({ message: '请填写完整信息', type: 'warning' })
          })
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        // change img fc
        addLineImg(file, fileList) {
          cos.sliceUploadFile({
            Bucket: Bucket,
            Region: Region,
            Key: 'images/' + file.name,
            Body: file.raw,
            onHashProgress: function (progressData) {
              console.log('校验中', JSON.stringify(progressData));
            },
            onProgress: function (progressData) {
              console.log('上传中', JSON.stringify(progressData));
            },
          }, function (err, data) {
            console.log(err, data);
          });
          console.log(file)
          this.ruleForm.thumb = fileList
        },
        // 超出限制的fc
        addLineOutLimit(file) {
          this.$message({ message: '最多添加五张图片', type: 'warning' })
        },
        // 放大线路img
        lineMagnifyImg(file) {
          this.globalMagnify = true
          console.log(file)
          this.globalMagnifyUrl = file.url
        },
        // 移除选择img
        lineRemoveImg(file) {
          let list = this.ruleForm.thumb
          list.map((item, index) => {
            if (item.name == file.name) {
              list.splice(index, 1)
            }
          })
        },
        // 添加线路特色
        featureDotsAdd(index) {
          const obj = { val: '', IsDel: false }
          if (this.ruleForm.addLineFeature[index].val == '') {
            this.$message({ message: '请先填写当前选项', type: 'warning' })
          } else {
            this.featureDotsItemAddNum++
            this.ruleForm.addLineFeature.push(obj)
          }
        },
        // 添加线路特色del
        featureDotsDel(lineFeatureItemIndex) {
          if (this.ruleForm.addLineFeature.length > 1) {
            this.ruleForm.addLineFeature.splice(lineFeatureItemIndex, 1)
            this.featureDotsItemAddNum--
          }
          // console.log(this.ruleForm.addLineFeature)
        },
        // 添加线路特色取消
        featureDotsDelCancel(lineFeatureItemIndex) {
          this.ruleForm.addLineFeature[lineFeatureItemIndex].IsDel = false
          console.log(this.ruleForm.addLineFeature)
        },
        // 步骤添加
        lineStepAdd(dayItemIndex, stepIndex, formName) {
          console.log(this.$refs, dayItemIndex, stepIndex)
          const obj = { val: '', IsDel: false, playDayNum: 0, content: [], resource: [] }
          let list = this.ruleForm.DayContentList[dayItemIndex]
          let that = this
          let arr = []
          if (list.scenicPieceStep.length != 0) {
            arr.push(allCheckRules(that, formName + dayItemIndex, stepIndex + 1))
            Promise.all(arr).then(function () { //都通过了
              list.scenicPieceStep.push(obj)
            }).catch((err) => {
              console.log("err");
              this.$message({ message: '请填写完整信息', type: 'warning' })
            })
          } else {
            list.scenicPieceStep.push(obj)
          }
        },
        // 步骤取消
        lineStepCancel(dayItemIndex, stepIndex) {
          let list = this.ruleForm.DayContentList[dayItemIndex].scenicPieceStep[stepIndex]
          list.IsDel = false
        },
        // 景点img添加
        addScenicImg(file, fileList, dayItemIndex, stepIndex) {
          let list = this.ruleForm.DayContentList[dayItemIndex].scenicPieceStep
          cos.sliceUploadFile({
            Bucket: Bucket,
            Region: Region,
            Key: 'images/' + file.name,
            Body: file.raw,
            onHashProgress: function (progressData) {
              console.log('校验中', JSON.stringify(progressData));
            },
            onProgress: function (progressData) {
              console.log('上传中', JSON.stringify(progressData));
            },
          }, function (err, data) {
            // console.log(err, data);
            if (err) {
              this.$message({ message: '上传失败', type: 'warning' })
            }
            file.url = data ? data.Location : file.url
            console.log(data)
            list[stepIndex].scenicImg = fileList
          });
          // list[stepIndex].scenicImg = fileList
          console.log(file.url)
          console.log(list[stepIndex].scenicImg)
        },
        // 景点img添加限制
        addScenicImgLimit(file) {
          this.$message({ message: '最多添加五张图片', type: 'warning' })
        },
        // 景点img移除
        ScenicImgRemoveImg(dayItemIndex, stepIndex, file) {
          let list = this.ruleForm.DayContentList[dayItemIndex].scenicPieceStep[stepIndex].scenicImg
          list.map((item, index) => {
            if (item.name == file.name) {
              list.splice(index, 1)
            }
          })
          console.log(list)
        }
      }
    })
  </script>
</body>

</html>